<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKU-demo</title>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="app">
        <div class="sku_select">
            <!-- 添加规格-->
            <el-row>
                <el-col :span='2'>添加规格:</el-col>
                <el-col :span='8'>
                    <el-input v-model='Specs' placeholder="请输入内容" size='small' @keyup.enter.native='addSpecs'>
                        <el-button slot="append" @click='addSpecs'>添加规格</el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!-- 添加参数-->
            <el-row class="specs_box">
                <div class="specs_item" v-for='(item,i) of SpecsList' :key='i'>
                    <div class="specs_titt">{{item.key}}</div>
                    <div class="specs_key">
                        <el-checkbox-group v-model="item.checkedAttr" @change='checkboxChange(item)'>
                            <el-checkbox v-for="(value,j) in item.value" :label="value" :key="j">{{value}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="specs_add">
                        <el-input placeholder="请输入内容" v-model='attribute' size='small' @keyup.enter.native='addAttribute(item,i)'>
                            <el-button slot="append" @click='addAttribute(item,i)'>添加参数</el-button>
                        </el-input>
                    </div>
                </div>
            </el-row>
        </div>
        <div class="table_box">
            
            <el-table ref='SkuData'  :data="SkuData" style="width: 100%" border>
                <!-- <el-table-column align="center" v-for="(item, i) of checkedAttr" :key="i">
                    <template slot="header" slot-scope="scope">
                        {{item.key}}
                    </template>
                    <template slot-scope="scope">
                        {{ scope.row.price }}
                    </template>
                </el-table-column> -->
                <template v-for="(item, index) in checkedAttr">
                    <el-table-column
                        :label="item.key"
                        :key="index"
                        align='center'>
                        <template slot-scope="scope">
                            {{ scope.row[item.key]}}
                        </template>
                </el-table-column>
                </template>
                <el-table-column label="价格" align='center'>
                    <template slot-scope='scope'>
                        <el-input v-model='scope.row.price'></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="库存" align='center'>
                    <template slot-scope='scope'>
                        <el-input v-model='scope.row.stock'></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>{{table}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>
    <script src="./js/main.js"></script>
</body>

</html>